<template>
  <div class="make">
    <div class="titles">
      <h4>预约规则</h4>
      <span>创建人：{{searchData.createPerson}}</span>
      <span>创建时间：{{ searchData.createTime }}</span>
      <span>使用状态：未使用</span>
    </div>
    <div class="dateMake">
      <span>
        <strong>预约日期：</strong>
        {{ searchData.workDate || '' }}
      </span>
      <div class="blocks">
            <div class="flLeft">
                <p>节假日设置：</p>
            </div>
            <div class="flRight">
                   <i  v-for="(item,x) in searchDataHoliday" :key="x"  v-if="x<hilidayNum" style="padding-left:5px;font-style:normal;"> 
                    {{item}}
                    </i>  
                    <a href="javascript:;"  @click="checkMore()">
                    {{checkMoreMessage}}
                    <i class="el-icon-arrow-down"></i>
                    </a>
            </div>
      </div>
      <div class="blocks">
        <div class="flLeft">
          <p>可预约时间段：</p>
        </div>
        <div class="flRight">
          <p
            v-for="(item,i) in searchData.bookingPeopleArr"
            :key="i"
          >{{item.startTime}}~{{item.endTime}} 最多可预约{{item.number}}人 非预约用户线下可取号{{item.offlineNum}}个</p>
        </div>
      </div>
      <div>
        <div class="blocks">
          <div class="flLeft">
            <p>非预约时间段：</p>
          </div>
          <div class="flRight">{{notTime || '未设置'}}</div>
        </div>
      </div>
      <span>
        <strong>提前预约：</strong>
        最低可提前{{searchData.appoDayStart}}天预约 至 最高可提前{{searchData.appoDayEnd}}天预约
      </span>
      <span>
        <strong>预约取号：</strong>
        每人每天可预约次数为{{searchData.maxAppoNum}}次
      </span>
      <span v-if="!searchData.takeNumSet">
        <strong>取号设置：</strong>当天上午只取上午的号码，下午只取下午的号码
      </span>
      <span v-else>
        <strong>取号设置：</strong>当天可取当天所有号码
      </span>
      <span v-if="searchData.breakAppoSet">
        <strong>爽约机制：</strong>
        采用爽约机制 &nbsp;&nbsp; 若爽约达到{{searchData.breakNum}}次，则{{searchData.breakDay}}天内不可预约
      </span>
      <span v-else>
        <strong>爽约机制：</strong>不采用爽约机制
      </span>
      <span>
        <strong>是否使用该规则：</strong>
        <el-radio v-model="radio1" :label="breakOne">是</el-radio>
        <el-radio v-model="radio1" :label="breakTwo">否</el-radio>
      </span>
      <el-button type="primary" class="btns" @click="btns()" :plain="true">确定</el-button>
    </div>
  </div>
</template>

<script>
import { orgMakeSearch, makeIndex } from "../api/getData";
export default {
  data: function() {
    return {
      searchData: "",
      searchDataHoliday: "",
      breakOne: true,
      breakTwo: false,
      radio1: true,
      checkMoreMessage:'查看更多',
      holidayCheckMore:true,
      hilidayNum:3,
      notTime:''
    };
  },
  mounted: function() {
    var organId = JSON.parse(window.sessionStorage.getItem("organid"));
    orgMakeSearch({ organId: organId }).then(data => {
      this.searchData = data.data.data;
      this.searchDataHoliday = data.data.data.holiday
      this.notTime = data.data.data.notAppoTime.replace(/&/g, " ")
      if (data.data.data.holiday) {
        this.searchDataHoliday = data.data.data.holiday.split(",");

      }
    });
  },
  methods: {
      checkMore() {
      this.holidayCheckMore = !this.holidayCheckMore;
      if (this.holidayCheckMore == true) {
        this.checkMoreMessage = "查看更多";
        this.hilidayNum = 3
      } else {
        this.checkMoreMessage = "收起";
        this.hilidayNum = 999999;
      }
    },
    btns() {
      if (this.radio1 == true) {
        var personId = JSON.parse(sessionStorage.getItem("personId"));
        let weekS = this.searchData.workDate.split("至");
        let length = this.searchData.bookingPeopleArr.length;
        let appoTimeList = [];
        for (let i = 0; i < length; i++) {
          var dcs = {
            startTime: this.searchData.bookingPeopleArr[i].startTime || 0,
            endTime: this.searchData.bookingPeopleArr[i].endTime || 0,
            number: this.searchData.bookingPeopleArr[i].number || 0,
            offlinenum: this.searchData.bookingPeopleArr[i].offlineNum || 0,
            timeSerialNum: i + 1
          };

          appoTimeList.push(dcs);
        }
        let holidays = this.searchData.holiday.replace(/\//g, "-");
       
        let arrs = [ "每周一", "每周二", "每周三","每周四","每周五","每周六", "每周日" ];
        arrs.forEach((item,index) =>{

          
        })
       
        makeIndex({
          workDateJson: {
            workDateStart: weekS[0],
            workDateEnd: weekS[1],
            holidaySet: holidays || ""
          },
          workTimeJson: {
            notAppoTime: this.searchData.notAppoTime,
            appoTimeList: appoTimeList
          },
          takeNumberJson: {
            takeNumSet: this.searchData.takeNumSet,
            appoNum: this.searchData.maxAppoNum,
            appoDayStart: this.searchData.appoDayStart,
            appoDayEnd: this.searchData.appoDayEnd
          },
          breakAppoJson: {
            breakAppoSet: this.searchData.breakAppoSet,
            breakNum: this.searchData.breakNum,
            breakDay: this.searchData.breakDay
          },
          latticeId: JSON.parse(window.sessionStorage.getItem("latticeid")),
          personId: personId
        }).then(data => {
          console.log(data.data.msg);
          if (data.data.code == 0) {
            this.$emit("listenTochildEvent", true);
            this.$message({
              message: data.data.msg,
              type: "success"
            });
          }
        });
      }else{
           this.$emit("listenTochildEvent", false);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.make {
  width: 100%;
  .titles {
    min-width: 960px;
    height: 88px;
    background: #fff;
    padding-left: 24px;
    display: block;
    h4 {
      font-size: 16px;
      color: #333437;
      line-height: 26px;
      padding-top: 18px;
      font-weight: bold;
    }
    span {
      font-size: 14px;
      color: #000;
      line-height: 26px;
      padding-right: 150px;
    }
  }
  .dateMake {
    overflow: hidden;
    background: #fff;
    margin-top: 20px;
    border: 1px solid #e9e9e9;
    margin-bottom: 40px;
    padding: 40px;
    padding-bottom: 20px;
    h3 {
      height: 44px;
      line-height: 44px;
      background: #fafafa;
      font-weight: bold;
      border-bottom: 1px solid #e9e9e9;
      text-indent: 16px;
      font-size: 15px;
      margin-bottom: 20px;
      a {
        float: right;
        color: #328ef9;
        text-decoration: none;
        margin-right: 32px;
      }
    }
    span {
      display: block;
      margin-right: 150px;
      font-size: 15px;
      line-height: 30px;
      overflow: hidden;
      color: #999;
      margin-top: 15px;
      strong {
        color: #333;
        font-weight: normal;
        padding-left: 16px;
        float: left;
        width: 150px;
        text-align: right;
      }
      .checkMore {
        width: 650px;
        float: left;
      }
      a {
        padding-left: 20px;
        color: #328ef9;
        text-decoration: none;
      }
    }
    .btns {
      width: 120px;
      margin-left: 150px;
      margin-top: 20px;
      margin-bottom: 50px;
    }
    .blocks {
      width: 100%;
      overflow: hidden;
      margin-top: 10px;
      .flLeft {
        width: 150px;
        float: left;
        text-align: right;
        line-height: 32px;
      }
      .flRight {
        width: 750px;
        float: left;
        color: #888;
        line-height: 32px;
        overflow: hidden;
        a{
            text-decoration: none;
            color: #328ef9;
            margin-left: 10px;
        }
      }
    }

    .checkMake {
      width: 100%;
      float: left;
      padding-left: 110px;
      font-size: 14px;
      padding-bottom: 10px;
      margin-top: 10px;
      a {
        color: #328ef9;
        text-decoration: none;
        float: left;
      }
      i {
        float: right;
        color: #bbb;
        font-style: normal;
        margin-right: 32px;
      }
    }
  }
}
.el-form-item {
  float: left;
  position: relative;
  margin-bottom: 5px;
}
.el-select-dropdown__item {
  text-align: center;
}
.preview p {
  line-height: 32px;
  color: #666;
}
</style>


